---
import { type LogoKey, logos } from '~/data/logos';

export interface Props {
	size?: `${number}rem` | `${number}px`;
	shape?: 'circle' | 'rounded';
	brand: LogoKey;
}

const { brand, size = '4rem', shape = 'circle' } = Astro.props as Props;
const { file, padding } = logos[brand] || {};

// Make a rough guess at the pixel size to use as width/height attributes
const [, value, unit] = /^(\d*(?:\.\d+)?)(\w+)$/.exec(size) || ['4', 'rem'];
const valueAsNumber = parseFloat(value);
const pixelSize = unit === 'px' ? valueAsNumber : valueAsNumber * 16;
---

{
	file && (
		<div class:list={['logo', shape]} style={`--logo-size: ${size}; --logo-padding: ${padding};`}>
			<img
				src={`/logos/${file}`}
				alt=""
				loading="lazy"
				decoding="async"
				width={pixelSize}
				height={pixelSize}
			/>
		</div>
	)
}

<style>
	.logo {
		display: flex;
		place-content: center;
		font-size: var(--logo-size);
		width: 1em;
		height: 1em;
		/* Allows logos to be visible in both light/dark. Hardcoded because variant colours adjust to theme */
		background-color: hsl(224, 10%, 10%);
		border: 1px solid hsl(224, 10%, 23%);
		/* Indicates the brand logo boundaries for forced colors users, transparent is changed to a solid color */
		outline: 1px solid transparent;
		overflow: hidden;
	}

	.circle {
		border-radius: 50%;
	}

	.rounded {
		border-radius: 0.125em;
	}

	.logo img {
		padding: var(--logo-padding);
		width: 100%;
		height: 100%;
	}
</style>
